<template style="display: block ruby;">
    <div v-if='flimlist' class="box">
        <!-- scroller是想要控制滚动条的样式，--未成功 -->
        <div class="abbs scroller">
            <!-- 浮动的电影名 -->
            <div class="title" v-scroll>
                <span class="goBack">返回</span>
                <span>{{flimlist.name}}</span>
            </div>
        <!-- 封面图片 -->
        <div class="target-img" :style="`background-image: url(${flimlist.poster})`">
            <van-icon name="revoke" size="26px" @click="revert()"/>
        </div>
        <div class="film-detail">
            <!-- 简介部分 -->
            <div>
                <div class="name">{{flimlist.name}}</div>
                <div class="grey-text">{{flimlist.category}}</div>
                <div class="grey-text">
                    {{premiereAts}}上映
                </div>
                <div class="grey-text">{{flimlist.nation}}|{{flimlist.runtime}}分钟</div>
                <div class="grey-text" style="padding-top: 12px;">
                    <div :class="!isto?'hidde':''" style="line-height: 21px;">
                        {{flimlist.synopsis}}
                    </div>
                    <div @click=istos() style="text-align: center;">{{to}}</div>
                </div>
            </div>
            <div>
                <div>演职人员</div>
                <div>
                    <swiper :loop='true' spr="swiper2" :free="free1" el="aaa" :key="flimlist.filmId+'-yan'">
                        <swiper-item v-for="date in flimlist.actors" :key="date.avatarAddress">
                            <div class="actors">
                                <div class="actors-pic">
                                    <img :src="date.avatarAddress+'?x-oss-process=image/quality,Q_70'" 
                                        :alt="date.name" width="85px" >
                                </div>
                                <div class="actors-name">{{date.name}}</div>
                                <div class="actors-role">{{date.role}}</div>
                            </div>
                        </swiper-item>
                       
                    </swiper>
                </div>
            </div>
            <hr>
            <div class="photos" :key="flimlist.filmId+'-photos'">
                <div class="photos-title-bar">
                    <span>剧照</span>
                    <span style="font-size: 13px;color: #797d82;float: right;">
                        共{{('photos' in flimlist)? flimlist.photos.length:'0'}}张    
                    </span>    
                </div>
                <br>
                <div :v-if='("photos" in flimlist)'>
                    <swiper :loop='false' :free="free2" spr="swiper3" el="bbb">
                    <swiper-item v-for="(pic,index) in flimlist.photos" :key="pic">
                            <div class="pic" @click="handlePreview(pic,index)">
                                <img :src="pic+'?x-oss-process=image/quality,Q_70'" alt="" width="150px" height="100px">
                            </div>
                    </swiper-item>
                    </swiper>
                </div>
                <!-- 。。 -->
                <p v-if='!("photos" in flimlist)' :key="flimlist.filmId">暂无其他{{flimlist.filmId}}</p>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
// 导入axios的封装
import http from '../util/http'
// 要下载 ：   cnpm i --save moment
import moment from 'moment'
moment.locale('zh-cn')  // 设置地区 

import swiper from './Swipers/Swiper.vue'
import swiperItem from './Swipers/SwiperItem'

import { ImagePreview } from 'vant';

// vue指令的自定义
Vue.directive('scroll',{
    inserted(el){
        // console.log(el);
        el.style.display='none';
        // 鼠标滚动事件   这里变成了顶级滑动条的判断，应该是当前（二级）滑动条的判断
        // window.onscroll = () => {
        //     if((document.documentElement.scrollTop || document.body.scrollTop)>50){
        //         console.log("50");
        //         el.style.display = 'block'
        //     }else{
        //         el.style.display = 'none'
        //     }
        // }
       
    }
})

export default {
  components: { swiper,swiperItem },
    data(){
        return {
            flimlist: null,
            // id: '',
            isto: false,
            ispic:false,
            to: '展开',
            free1:{
                slidesPerView: 3,
                spaceBetween: 20,
                freeMode: true,
            },
            free2:{
                slidesPerView: 2,
                spaceBetween: 20,
                freeMode: true,
            }
        }
    },
    methods:{
        handlePreview(pic,index){
            ImagePreview({
                images:[pic+'?x-oss-process=image/quality,Q_70'],
                closeable: true,
            })
        },  
        revert(){
            this.$router.push('verted/cinema')
        },   
        istos(){
            this.isto = !this.isto;
            if(this.isto){
                this.to = '收起';
            }else{
                this.to = '展开';
            }
        },
       myaxios(){
         // axios数据获取 -- 封装法
            http({
                url:`/gateway?filmId=${this.$route.params.id}&k=3440989`,
                headers:{
                    'X-Host':'mall.film-ticket.film.info'
                }
            }).then(res => {
                // console.log(res.data.data.film);
                this.flimlist = res.data.data.film
                console.log("详细数据获取成功");
                 
            })
        }
    },
    // 第一次创建时
    // created () {
    //     this.id = this.$route.params.id
    // },
    // 路由监听，当路由发生变换时执行；to 表示URL #号后面的部分
    watch:{
        $route(to,from){
            // console.log(to.path.split('/'));
            // this.id = to.path.split('/')[2];
            // myaxios();
             this.myaxios();
        }
    },
    mounted () {
        this.myaxios();
        console.log("完成");
    },
    //计算属性，存在缓存，基于依赖的缓存
    computed:{
        premiereAts(){
            // console.log(this.flimlist.premiereAt);
            return moment(this.flimlist.premiereAt*1000).format('YYYY-MM-DD');  
        }
    }
}

</script>

<style lang="scss" scoped>
    .box{
        width: 375px;
        height:  667px;
        // background-color: antiquewhite;
        text-align: initial;
        margin-top: 12px;
        display: inline-block;
        border-style: groove;
    }
    .goBack {
        height: 30px;
        position: absolute;
        color: gray;
        left: 5px;
        font-size: 12px;
        line-height: 44px;
    }
    .title {
        font-size: 19px;
        line-height: 44px;
        width: 375px;
        text-align: center;
        position: absolute;
        background-color: #fff;
        color: #191a1b;
    }
    .abbs{
        overflow:scroll;
        height: 100%;
        width: 100%;
        overflow-x:hidden;
    }
    .film-detail {
        padding: 15px;
        padding-top: 12px;
        background-color: #fff;
    }
    .target-img{
        width: 100%;
        height: 13.1rem;
        // 背景图片设置初始位置。;    保持图片原有大小
        background-position: center;
        background-size: cover;
    }
    .name {
        color: #191a1b;
        font-size: 18px;
        height: 24px;
        line-height: 24px;
        margin-right: 7px;
    }
    .grey-text {
        font-size: 13px;
        color: #797d82;
        margin-top: 4px;
    }
    .hidde {
        height: 45px !important;
        overflow: hidden;
    }
    .actors{
        width: 85px;
        min-width: 85px;
        height: 128px;
        text-align: center;
        .actors-pic{
            width: 85px;
            height: 85px;
            background: rgb(249, 249, 249) none repeat scroll 0% 0%;
            opacity: 1;
            display: block;
            overflow: hidden;
            img{
                width: 5.2rem;
            }
        }
        .actors-name {
            padding-top: 10px;
            font-size: 12px;
            color: #191a1b;
            width: 85px;
            height: 18px;
            display: block;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .actors-role {
            font-size: 10px;
            color: #797d82;
        }
    }

    .photos {
        margin-top: 10px;
        margin-bottom: 60px;
        background-color: #fff;
    }
    .photos-title-bar {
        height: 12px;
        width: 100%;
        padding: 8px;
    }
    .pic{
        width: 150px;
        height: 100px;
        background: rgb(249, 249, 249) none repeat scroll 0% 0%;
        opacity: 1;
        display: block;
    }


    .scroller::-webkit-scrollbar {
        width: 3px;
        height: 8px;
    }

    .scroller::-webkit-scrollbar-track {
        background-color:#F5F5F5;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
    .scroller::-webkit-scrollbar-thumb {
        background-color:#c8c8c8;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
</style>